<template>
  <v-dialog max-width="500" v-model="dialog" persistent>
    <v-card :title="DialogTitle">
      <v-card-text>
        {{ Message }}
      </v-card-text>

      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn :text="$t('Cancel')" @click="Cancel"></v-btn>
        <v-btn :text="$t('Confirm')" @click="Confirm"></v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const dialog = ref(false);
const Message = ref("");
const DialogTitle = ref("");

let resolveFn: Function | null = null;

const OpenDialog = (message: string, dialogTitle: string) => {
  if (!dialogTitle) {
    dialogTitle = t("Tip");
  }
  Message.value = message;
  DialogTitle.value = dialogTitle;
  dialog.value = true;

  return new Promise((resolve) => {
    resolveFn = resolve;
  });
};

const Confirm = () => {
  dialog.value = false;
  resolveFn && resolveFn(true);
};

const Cancel = () => {
  dialog.value = false;
  resolveFn && resolveFn(false);
};

defineExpose({ OpenDialog });
</script>
